<template>
  <div v-loading="loadding" class="treeSelectDialogView">
    <el-input
      :size="size"
      :disabled="disabled"
      @clear="clear()"
      clearable
      @focus="opaneDialog(treeData)"
      placeholder="请输入内容"
      :value="inputText(treeData, value)"
    >
      <i slot="suffix" class="el-icon-s-operation" @click="opaneDialog(treeData)"></i>
    </el-input>
    <el-dialog :title="title" :center="false" :visible.sync="dialogTableVisible">
      <div class="tissueDataView">
        <div class="selectDataView">
          <span>{{ sclectName }}</span>
        </div>
        <div class="flex-r-c" style="margin: 0 0 10px 0">
          <!-- <span class="nameText">组织名称：</span> -->
          <el-input size="mini" placeholder="输入关键字进行过滤" v-model="filterText"> </el-input>
        </div>

        <div>
          <el-tree
            :node-key="defaultProps.id"
            :show-checkbox="dataType == 'datas'"
            :check-strictly="dataType == 'datas'"
            @check-change="checkChange"
            @node-click="handleNodeClick($event)"
            class="filter-tree"
            :data="MytreeData != '' ? MytreeData : treeData"
            :props="defaultProps"
            :default-expand-all="false"
            :filter-node-method="filterNode"
            ref="tree"
          >
          </el-tree>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close()">取 消</el-button>
        <el-button type="primary" @click="submitTissueData">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  props: {
    title: '',
    treeData: [],
    defaultProps: {},
    // text 单选
    // data 多选
    dataType: '',
    value: '',
    disabled: null,
    size: {
      type: String,
    },
  },
  data() {
    return {
      loadding: false,
      dialogTableVisible: false,
      selectDataView: '',
      filterText: '',
      sclectName: '',
      defaultData: this.defaultProps,
      selectTissueData1: null,
      selectTissueData: null,
      MytreeData: [],
    };
  },
  watch: {
    treeData: function (newVal, oldVal) {
      // console.log(value)
      // this.MytreeData = this.treeData
    },
    filterText(val) {
      this.$refs.tree.filter(val);
    },
    defaultProps: function (newVal, oldVal) {
      this.defaultData = newVal; //newVal即是chartData
      // this.drawChart();
    },
    deep: true,
  },
  mounted() {
    console.log(this.$props);
    try {
      let treeData = this.$props.treeData;
      if (treeData instanceof Promise) {
        this.loadding = true;
        treeData.then((data) => {
          this.MytreeData = data;
          this.loadding = false;
        });
      }
    } catch (error) {}
  },
  beforeUpdate() {
    // let treeData = this.$props.treeData;
    // if (treeData instanceof Promise) {
    //     treeData.then((data) => {
    //         this.MytreeData = data
    //     })
    // }
    // debugger
    // console.log(this.MytreeData)
  },
  methods: {
    opaneDialog(data) {
      // data.then((datas) => {
      //     console.log(datas)
      //     this.MytreeData = datas
      this.dialogTableVisible = true;
      // });
      console.log(data);
    },
    clear() {
      this.selectTissueData1 = null;
      this.selectTissueData = null;
      this.$emit('update:value', null);
    },
    inputText(treeData, id) {
      let treeDatas = treeData;
      if (this.MytreeData != '') {
        treeDatas = this.MytreeData;
      }
      if (id) {
        if (!Array.isArray(id)) {
          return this.findName(treeDatas, id);
        } else {
          let nameArray = id.map((id) => this.findName(treeDatas, id));
          return nameArray.join(',');
        }
      }
    },
    findName(treeData, id) {
      // 遍历树形数据中的每个元素
      if (treeData) {
        for (let item of treeData) {
          // 如果元素的id和要找的id相等，就返回元素的name
          if (item[this.defaultData.id] === id) {
            return item[this.defaultData.label];
          }
          // 否则，如果元素有children属性，就继续递归遍历它的children
          if (item[this.defaultData.children]) {
            let result = this.findName(item[this.defaultData.children], id);
            // 如果递归遍历返回了一个非空的结果，就返回这个结果
            if (result) {
              return result;
            }
          }
        }
      }
      // 如果遍历完了还没有找到，就返回null
      return null;
    },
    // 确定
    submitTissueData() {
      // console.log('确定')
      if (this.dataType == 'datas') {
        const checkedNodes = this.$refs.tree.getCheckedNodes();
        this.selectTissueData = checkedNodes;
        let returnData = [];
        for (let e in checkedNodes) {
          returnData.push(checkedNodes[e][this.defaultData.id]);
        }
        this.$emit('update:value', returnData);
        this.$emit('getReturnData', this.selectTissueData);
      } else {
        this.selectTissueData = this.selectTissueData1;
        // this.inputText = this.selectTissueData.orgName
        this.$emit('update:value', this.selectTissueData[this.defaultData.id]);
        this.$emit('getReturnData', this.selectTissueData);
      }
      // console.log(this.selectTissueData)
      this.dialogTableVisible = false;
      // if (this.selectTissueData1.orgId) {
      //     this.selectTissueData = this.selectTissueData1
      //     this.datax.orgId = this.selectTissueData1.orgId
      //     // this.getdatalist(this.datax);
      //     this.dialogTableVisible = false
      // } else {
      //     this.$message.error('未选择组织')
      // }
    },
    // 选中
    checkChange() {
      if (this.dataType == 'datas') {
        const checkedNodes = this.$refs.tree.getCheckedNodes();
        console.log(checkedNodes);
        this.selectTissueData1 = checkedNodes;
        let test = [];
        for (let e in checkedNodes) {
          test.push(checkedNodes[e][this.defaultData.label]);
        }
        this.sclectName = test.join(',');
      }
    },
    // 选择
    handleNodeClick(data) {
      if (this.dataType == 'text') {
        this.selectTissueData1 = data;
        this.sclectName = data[this.defaultData.label];
        console.log(data);
      }
    },
    // 取消
    close() {
      this.sclectName = null;
      this.selectTissueData1 = null;
      this.dialogTableVisible = false;
    },
    // 字段筛选
    filterNode(value, data) {
      // console.log(data)
      if (!value) return true;
      return data[[this.defaultData.label]].indexOf(value) !== -1;
    },
  },
  computed: {
    //
  },
};
</script>

<style lang="scss" scoped>
.flex-c {
  display: flex;
  flex-direction: column;
}

.flex-r {
  display: flex;
  flex-direction: row;
}

.flex-r-c {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.flex-r-c-c {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.flex-r-c-sp {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.treeSelectDialogView {
  width: 100%;

  .dialog-footer {
    justify-content: flex-end !important;
  }

  .tissueDataView {
    .selectDataView::-webkit-scrollbar {
      // width: 5px;

      height: 10px;
    }

    ::-webkit-scrollbar-corner {
      background: transparent;
    }

    .selectDataView::-webkit-scrollbar-thumb {
      background: #efefef;
      border-radius: 4px;
    }

    .selectDataView {
      background: #f7f9fd;
      border-radius: 4px;
      line-height: 1;
      margin: 8px 0;
      overflow-x: auto;
      overflow-y: hidden;
      padding: 5px 5px 4px;
      white-space: nowrap;

      span {
        color: #333;
        display: inline-block;
        min-width: 160px;
        overflow: hidden;
        padding: 2px;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .nameText {
      word-break: keep-all;
      white-space: nowrap;
    }

    .filter-tree::-webkit-scrollbar {
      width: 0 !important;
    }

    .filter-tree {
      overflow: auto;
      height: 50vh;
      -ms-overflow-style: none;
      overflow: -moz-scrollbars-none;
      scrollbar-width: none;
    }
  }
}
</style>
